import { deepClone } from "./util";

// 计算四个角坐标
function recalFourDots(newtarget) {
    let width = newtarget.target.clientWidth
    let height = newtarget.target.clientHeight
    let x = newtarget.x
    let y = newtarget.y
    x = x < 0 ? 0 : x
    y = y < 0 ? 0 : y
    let dot0 = { x, y }
    let dot1 = { x: dot0.x + width, y }
    let dot2 = { x: dot0.x + width, y: dot0.y + height }
    let dot3 = { x, y: dot0.y + height }
    return {
        x,
        y,
        fourDots: [dot0, dot1, dot2, dot3]
    }
}
// 碰撞检测预处理
function collapsePre(obj, id, ids) {
    // 1. 先排除她自己
    let index = ids.findIndex(item => item.id === id)
    ids.splice(index, 1)
    // 2. 剥离其他item的四个点 组成新数组
    let arrDots = ids.map(item => item.fourDots)
    // 3. 碰撞检测，单纯检测是否碰撞上
    let isCollapse = judgeCollapsePure(obj.fourDots, arrDots)
    // 4.判断是否碰撞上，如果碰撞上，提示并且归位
    if (isCollapse) {
        this.$message({
            message: '不能碰撞到！',
            type: 'warning'
        });
        this.item.x = this.item.back.x;
        this.item.y = this.item.back.y;
        move.call({ x: this.item.back.x, y: this.item.back.y, rotate: 0 }, this.item.target)
    } else {
        Object.assign(this.item, obj)
    }
}
// todo 单纯检测
function judgeCollapsePure(myfourDots, arrDots) {
    function innerJudge(dots1, dots2) {
        for (let k = 0; k < dots2.length; k++) {
            const mydot = dots2[k];
            // 在范围内 需要优化交叉和涵盖 有些复杂以后做或者不做
            if (mydot.x > dots1[0].x && mydot.x < dots1[2].x && mydot.y > dots1[0].y && mydot.y < dots1[2].y) {
                return true
            }
        }
    }
    for (let i = 0; i < arrDots.length; i++) {
        const arrDot = arrDots[i];
        let flag = innerJudge(arrDot, myfourDots) || innerJudge(myfourDots, arrDot)
        if (flag) return true
    }
    return false
}
// 放入监听方法
function dropListener(ids) {
    let obj = recalFourDots(this.item)
    // 碰撞检测预处理
    collapsePre.call(this, obj, this.item.id, deepClone(ids))
}
// 拖拽开始监听方法
function dragStartListener(event) {
    this.back = { x: this.x, y: this.y }
}
// 拖拽监听方法
function dragMoveListener(event) {
    this.target = event.target
    // keep the dragged position in the data-x/data-y attributes
    this.x = (parseFloat(this.target.getAttribute('data-x')) || 0) + event.dx
    this.y = (parseFloat(this.target.getAttribute('data-y')) || 0) + event.dy
    move.call(this, this.target)
}
// 缩放监听方法
function resizeMoveListener(event) {
    if (this.rotate > 0) {
        this.rotate = 0
        return
    }
    var target = event.target;
    this.x = parseFloat(target.getAttribute("data-x")) || 0;
    this.y = parseFloat(target.getAttribute("data-y")) || 0;

    // update the element's style
    target.style.width = event.rect.width + "px";
    target.style.height = event.rect.height + "px";

    // translate when resizing from top or left edges
    this.x += event.deltaRect.left;
    this.y += event.deltaRect.top;
    move.call(this, target)

}
function move(target) {
    target.style.transform = "translate(" + this.x + "px," + this.y + "px)" + " rotate(" + this.rotate + "deg)";
    target.setAttribute("data-x", this.x);
    target.setAttribute("data-y", this.y);
}
function rotateListener() {
    // translate the element
    this.target.style.transform = 'translate(' + this.x + 'px, ' + this.y + 'px)' + " rotate(" + this.rotate + "deg)"
}


globalThis.dragStartListener = dragStartListener
globalThis.dragMoveListener = dragMoveListener
globalThis.dropListener = dropListener
globalThis.resizeMoveListener = resizeMoveListener
globalThis.rotateListener = rotateListener